<template>
 
<div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="价目中心"/>
<div class="content">
    <div class="main">

    <div class="area">
       <div class="head">
           <li>
               <span></span>
                <p>除螨服务</p>
           </li>
           <p>单价(元)</p>
       </div>
       <div class="list">
           <h1>服务费（包含一张床垫）</h1>
           <div>
               <li @click="choose(index)" :class="item.class == 1 ?'hover':''" v-for="(item,index) in num" :key="index">
                   <span>{{item.num}}次 </span>
                   <p>{{item.pay}}/次</p>
               </li>
           </div>
       </div>
       <div class="goods">
           <li>
               <p>床垫</p>
               <p>50</p>
               
           
           </li>
           <li>
               <p>地板（120-200平米内）</p>
               <p>200</p>
               
           </li>
           <li>
               <p>地毯</p>
               <p>100</p>
              
           </li>
           <li>
               <p>空调</p>
               <p>100</p>
               
           </li>
           <li>
               <p>沙发</p>
               <p>50</p>
              
           </li>
           <li>
               <p>窗帘（一副）</p>
               <p>50</p>
               
           </li>
           
       </div>
       <div class="head">
           <li>
               <span></span>
                <p>增值服务</p>
           </li>
           <p>单价(元)</p>
       </div>
       <div class="goods">
           <li>
               <p>婴儿床</p>
               <p>30</p>
                
           </li>
           <li>
               <p>空气净化</p>
               <p>50</p>
               
           </li>
           <li>
               <p>钢琴键盘</p>
               <p>30</p>
               
           </li>
           <li>
               <p>被子</p>
               <p>20</p>
               
           </li>
           <li>
               <p>枕头</p>
               <p>10</p>
                
           </li>
           <li>
               <p>毛绒玩具</p>
               <p>5</p>
                
           </li>
       </div>
       <!-- <div class="head">
           <li>
               <span></span>
                <p>支付方式</p>
           </li>
       </div> -->
       <!-- <div class="pay">
             <img src="../assets/zhifu_1.png" alt="">
             <p>微信</p>
             <img src="../assets/zhifu_2.png" alt="">
             <p>现金</p>
        </div>
        -->
         <div class="footer">
            <h1>温馨提示</h1>
            <p>订购次数越多，单次服务费越低，如订购6次服务，服务费为350元/次，如订购12次服务，服务费为300元/次</p>
        </div>
    </div>
    </div>    
</div> 
<!-- <div class="price">
    <p>￥{{price}}</p>
    <span>总计</span>
</div> -->
</div>
</template>

<script>
export default {

      data(){
          return{
              chooesed:1,
            
           num:[
              {
                   num:1,
                   pay:800,
                   class:0
               },
              {
                    num:3,
                    pay:450,
                    class:0
               },
               {
                    num:6,
                    pay:350,
                    class:0,  
               },
               {
                    num:12,
                    pay:300 ,
                    class:0, 
               },
               {
                    num:36,
                    pay:260,
                    class:0 
               },
           ],
           count:{  
               bad:0,//床垫
               floor:0,//地板
               carpet:0,//地毯
               air:0,//空调
               sofa:0,//沙发
               curtain:0,//窗帘
               babybad:0,//婴儿床
               airpurge:0,//空气净化
               piano:0,//钢琴键盘
               quilt:0,//被子
               pilow:0,//枕头
               toy:0,//毛绒玩具

           },
           price:0,
          }
      },
    //   created(){
    //       this.zongji()
    //   },
      methods:{
          zongji(){
              this.price=0
              if(this.chooesed = null){
                  this.chooesed = 1
              }
          },
           onClickLeft(){
        this.$router.push("home")
             },
             subtract(name,c_price){
                
                 if(this.count[name]<=0){
                     this.count[name] = 0
                 }else{
                     this.count[name] =  this.count[name]  - this.chooesed
                     this.price = this.price - c_price*this.chooesed
                 }
             },
             add(name,c_price){
                this.count[name] =  this.count[name] + this.chooesed
                     this.price = this.price + c_price*this.chooesed
             },
             choose(index,type=0){
                  this.count={  
                        bad:0,//床垫
                        floor:0,//地板
                        carpet:0,//地毯
                        air:0,//空调
                        sofa:0,//沙发
                        curtain:0,//窗帘
                        babybad:0,//婴儿床
                        airpurge:0,//空气净化
                        piano:0,//钢琴键盘
                        quilt:0,//被子
                        pilow:0,//枕头
                        toy:0,//毛绒玩具
                    }
                var num =  this.num[index]
                if(num.class==0){
                    for(var i=0;i<this.num.length;i++){
                        this.num[i].class  = 0
                        
                    }
                     num.class = 1
                     if(num.class  = 1){
                         this.chooesed = num.num
                         this.price =  num.pay*this.chooesed
                            console.log(this.chooesed)
                     }else{
                         this.chooesed = 1
                     }
                 }else{
                     this.num[index].class  = 0
                     num.class = 0
                     this.price = 0
                     this.chooesed = 1
                     console.log(this.chooesed)
                 }
                 
             },
            
    }
  }
</script>

<style lang="less" scoped>
     li{
      list-style: none;
  }


 .van-nav-bar {
    background-color: #fff;
    color: #000;
    border: none;
    .van-nav-bar__title{
        color: #000;
        font-weight: 600;
    }
    .van-icon-arrow-left:before{
        color: #000;
    }
}
    
.content {
        background-color: #fff;
        height: 100%;
        color: #fff;
        .main {
            width: 90%;
            margin: 0 auto;
            .left {
                span {
                 color: #fff;
                }
            }
            >div{
                padding-top: 10px;
                
                span {
                    color: #498859;
                    margin-left: 5px;
                    margin-top: 10px;
                }
                >p{
                    margin: 0;
                    margin-top: 20px;
                    margin-left: 5px;
                }
            }
        }
        
}
.area {
            margin-top: 10px;
            border-radius: 15px;
            background-color: #fff;
            height: 620px;
            color: #000;
            border: 2px solid #f6f6f6;
            .head {
                width: 90%;
                height: 40px;
                border-bottom: 1px solid #194092;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
            li{
                span {
                    display: inline-block;
                    width: 4px;
                    height: 15px;
                    background-color: #f5d146;
                    border-radius: 2px 2px 2px 2px;
                }
                p{
                    display: inline-block;
                    margin: 0;
                    font-size: 18px;
                    font-weight: 600;
                    margin-left: 8px;
                    color: #194092;
                }
            }
            >p{
                margin: 0!important;
                color: #194092;
                font-weight: 600;
                font-size: 15px;
            }
               
                
            }
        }
        .list {
            width: 90%;
            margin: 0 auto;
            padding-bottom: 10px;
            border-bottom: 1px solid #194092;
            >div{
                display: flex;
                justify-content: space-around;
                text-align: center;
                li{
                    font-size: 14px;
                    margin-left: 5px;
                    span {
                       color: #7a7a7a!important;
                    }
                    >p{
                        margin: 0!important;
                        font-weight: 600;
                        color: #7a7a7a;
                    }
                }
                
            }
         h1 {
             font-size: 14px;
             color: #ccc;
             font-weight: 500;
         }   
        }
        .goods {
            width: 90%;
            margin: 0 auto;
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
                font-size: 13px;
                p{
                    color: #7a7a7a;
                    margin: 0;
                }
            }
        }
        .pay {
            display: flex;
            align-items: center;
            img {
                margin: 10px;
                width: 25px;
                height: 25px;
            }
            p{
                font-size: 14px;
                color: #7a7a7a;
            }
        }
        .footer {
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 13px;
            h1 {
                font-size: 13px;
                margin: 0;
                color: #194092;
            }
            p{
               margin: 5px; 
               color: #7a7a7a;
            }
        }
        .box {
            ul,li{
                list-style: none;
                margin: 0;
                }
                button {
                    width: 20px;
                    height: 20px;
                    border: 1px solid #ccc;
                    background-color: #fff;
                    border-radius: 50%;
                }
                input {
                    border: none;
                    width: 20px;
                }
                li{
                float: left;
                }
                input{
                text-align: center;
                }
        
        }
        .hover {
            background-color: #ccc;
        }
        .price{
            position: fixed;
            bottom: 0px; 
            height: 50px;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            background-color: #fff;
            p{
                font-size: 20px;
                color: red;
                margin-left: 20px;
            }
            span{
                width: 80px;
                height: 50px;
                background-color: #194092;
                color: #fff;
                text-align: center;
                line-height: 50px;
            }
        }
</style>